<template>
  <Back title="身份认证" />
  <div class="auth-card">
      <h3 class="auth-title">身份认证</h3>
      <div class="process-steps">
        <div :class="['step', { active: currentStep === 1 }]">1. 上传证件</div>
        <div :class="['step', { active: currentStep === 2 }]">2. 信息验证</div>
        <div :class="['step', { active: currentStep === 3 }]">3. 完成认证</div>
      </div>
      <div v-if="imageUrl" class="preview-wrapper">
        <transition name="zoom">
          <img :src="imageUrl" class="preview-image" :class="{ 'preview-image-loaded': imageUrl }" />
        </transition>
        <div class="preview-tip">上传完成，请等待识别结果</div>
      </div>
    <el-upload
      action="javascript:void(0);"
      :class="{ 'active-upload': isDragActive }"
      :data="uploadData"
      :before-upload="beforeUpload"
      :show-file-list="false"
      @dragenter="isDragActive = true"
      @dragleave="isDragActive = false"
      @drop="isDragActive = false"
    >
      <el-button type="primary"><upload-filled /> {{ isDragActive ? '松开上传' : '点击上传' }}</el-button>
      <template #tip>
        <div class="upload-tip">拖拽文件到这里或点击上传</div>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import Back from '../utils/Back.vue';
const uploadData = ref({});
const imageUrl = ref('');
const isDragActive = ref(false);
const currentStep = ref(1);

const fetchUpToken = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/user/qiniu/');
    if (response.data.code === 10000) {
      uploadData.value.token = response.data.data;
    } else {
      ElMessage.error('获取上传凭证失败');
      throw new Error('获取上传凭证失败');
    }
  } catch (error) {
    ElMessage.error('请求错误: ' + error.message);
    throw error;
  }
};

const beforeUpload = async (file) => {
  try {
    await fetchUpToken();
    const formData = new FormData();
    formData.append('token', uploadData.value.token);
    formData.append('key', file.name);
    formData.append('file', file);

    const uploadResponse = await axios.post('http://up-z1.qiniup.com', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });

    if (uploadResponse.data && uploadResponse.data.key) {
      imageUrl.value = `http://zhangok.qiniu.com/${uploadResponse.data.key}`;
      ElMessage.success('上传成功');
      currentStep.value = 2;
      console.log(imageUrl.value);

      // 发送图片URL至后端
      const ocrResponse = await axios.post('http://127.0.0.1:8000/user/baidu/ocr/', { image_url: imageUrl.value });
      if (ocrResponse.data?.code === 200) {
        ElMessage.success('身份认证成功！');
        currentStep.value = 3;
        // 此处可添加跳转逻辑或状态更新
      } else {
        ElMessage.error(`认证失败: ${ocrResponse.data?.msg || '未知错误'}`);
      }
      
    } else {
      ElMessage.error('上传失败');
    }
  } catch (error) {
    ElMessage.error('上传失败: ' + error.message);
  }
  return false; // 阻止el-upload自动上传
};
</script>

<style scoped>
.active-upload {
  border-color: #409eff !important;
  background-color: rgba(64, 158, 255, 0.05);
}

.zoom-enter-active {
  transition: transform 0.3s ease;
}

.zoom-enter-from {
  transform: scale(0.95);
}

.preview-image-loaded {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.process-steps {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.step {
  padding: 8px 16px;
  margin: 0 10px;
  border-radius: 20px;
  background: #f5f7fa;
  color: #909399;
}

.step.active {
  background: #409eff;
  color: white;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}

:deep(.el-upload) {
  transition: all 0.3s ease;
}

:deep(.el-upload:hover) {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
}
.preview-wrapper {
  position: relative;
  margin: 20px 0;
}

.preview-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8px;
  text-align: center;
  border-radius: 0 0 8px 8px;
}

.mt-10 {
  margin-top: 10px;
}

:deep(.el-upload) {
  width: 100%;
  border: 2px dashed #ebedf0;
  border-radius: 8px;
  padding: 20px;
}

.auth-card {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.auth-title {
  text-align: center;
  margin-bottom: 20px;
}

.preview-image {
  width: 100%;
  border-radius: 8px;
}
</style>
